<template>
  <div class="login" :style="{ height: hrights }">
    <div class="lanhe">
      <div class="login-box">
        <div class="login-item">
          <el-input v-model="zhanghao" placeholder="请输入账号"></el-input>
        </div>
        <div class="login-item">
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
          ></el-input>
        </div>

        <div class="login-item">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="primary" @click="register">注册</el-button>
        </div>
        <div class="forget"><a href="/forget">忘记密码</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  name: "Login",
  data() {
    return {
      zhanghao: "",
      password: "",
      hrights: "",
    };
  },
  created() {
    this.handleResize();
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    register() {
      this.$router.push("/registerpage");
    },
    login() {
      request({
        url: "/user/loginuser",
        method: "post",
        params: {
          usernum: this.zhanghao,
          userpwd: this.password,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 500) {
            this.$message({
              showClose: true,
              type: "error",
              iconClass: "ss",
              message: "账号或密码错误",
            });
          } else {
            this.$store.commit("getUserId", res.data.data);
            sessionStorage.setItem(
              "userid",
              JSON.stringify(res.data.data.userId)
            );
            if (res.data.data.userAdmin == 1) {
              sessionStorage.setItem(
                "usertype",
                JSON.stringify(res.data.data.userAdmin)
              );
              this.$router.push("/admin");
              location.reload();
            } else if (res.data.data.userAdmin == 2) {
              this.$router.push("/homepage");
              location.reload();
            }
          }
        })
        .catch((err) => {
          console.log(err);
          console.log(this.inputEmail);
        });
    },
    handleResize() {
      this.hrights = document.documentElement.clientHeight + "px";
      console.log(this.hrights);
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  background: url("../../assets/img/beijin.jpeg");
  background-size: 100% 100%;
}

.lanhe {
  position: absolute;
  width: 3.2rem;
  padding-bottom: 0.2rem;
  background-color: rgba(184, 212, 219, 0.8);
  border-radius: 0.1rem;
  left: 34%;
  top: 25%;
}

.login-box {
  width: 2.5rem;
  font-size: 0.12rem;
  margin: 0 auto;
  margin-top: 0.4rem;
}

.login-item {
  margin-top: 0.25rem;
  text-align: center;
}

.login-item button {
  width: 40%;
}

.forget {
  margin-top: 0.1rem;
}

.forget a {
  font-size: 0.08rem;
  margin-left: 0.4rem;
  cursor: pointer;
  color: rgb(134, 136, 138);
  text-decoration: none;
}

.forget:hover {
  color: rgb(130, 189, 238);
}
</style>